<!--
 options: {
  padding       : 10,   // 二维码四边空白（默认为10px）
  width         : 256,  // 二维码图片宽度（默认为256px）
  height        : 256,  // 二维码图片高度（默认为256px）
  correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
  reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
  background    : "#ffffff",    // 二维码背景颜色（默认白色）
  foreground    : "#000000"     // 二维码颜色（默认黑色）
}
-->
<template>
  <img :src="imgBase64"/>
</template>

<script>
  //注释掉 不然打包会打进去
//  import jrQrcode from "jr-qrcode";
  export default {
    name: "mc-vue-js-qrcode",

    props: {
      id: {
        type: String,
        require: false,
      },
      value: {
        type: String,
        require: true,
      },
      padding:{
        type:Number,
        default:10
      },
      width:{
        type:Number,
        default:256
      },
      height:{
        type:Number,
        default:256
      },
      reverse:{
        type:Boolean,
        default:false
      },
      background:{
        type:String,
        default:"#ffffff"
      },
      foreground:{
        type:String,
        default:"#000000"
      }
    },
    data(){
      return {
        imgBase64: "",
        options:{
          padding:this.padding,
          width:this.width,
          height:this.height,
          reverse:this.reverse,
          background:this.background,
          foreground:this.foreground,
        }
      }

    },
    methods:{
      render(){
        this.imgBase64 = jrQrcode.getQrBase64(this.value, this.options);
      }
    },
    mounted() {
      this.render();
    },
    watch: {
      value(newVal) {
        this.imgBase64 = jrQrcode.getQrBase64(newVal, this.options);
      },
      options(newVal) {
        this.imgBase64 = jrQrcode.getQrBase64(this.value, newVal);
      },
    },

  };
</script>

<style></style>
